<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
     .box{
        margin: 10px;
        padding: 10px;
        width:400px;
        border-radius:10px;
        background-color: #ccc;
        display: flex;
        align-items: center;
     }
     .pic {
        margin: 10px;
        width:100px;
        height:100px;
        border-radius:5px;
        background-color: orange;
     }
     .price { 
        color: red;
        font-size: 20px;
     }
     .info { flex: 2}
     .p{ width:40px}
    </style>
</head>
<body>
    <div id="app">
       <div class="box" v-for="c,i in cart">
            <div @click="handle(i)">
                <input type="radio" v-model="c.sel" value="1">
            </div>
            <div class="pic">
                <img width="100" :src="c.pic">
            </div>
            <div class="info">
                <div>{{c.gname}}</div>
                <div class="price">￥{{c.price}}</div>
            </div>
            <input @change="calc" class="p" type="number" v-model="c.n">
       </div>
       <h3 class="price">合计：￥{{total}}</h3>
    </div>
</body>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        cart:[
            {gname:'三星原装数据线type C头',price:10,n:1,sel:0, pic:'../img/1.png'},
            {gname:'国家地理背包双肩包',price:200,n:1,sel:0,pic:'../img/2.png'},
            {gname:'安踏情侣卫衣',price:180,n:2,sel:0,pic:'../img/3.png'}
        ],
        total: 0 
    },
    methods:{
       handle(i){
         var a= this.cart[i].sel;
         this.cart[i].sel = (a+1)%2
         this.calc()   //计算
       },
       calc(){
          var t =0;
          this.cart.forEach( item=>{
             if(item.sel){
                t+= item.price * item.n
             }
          })
          this.total = t 
       }
    }
});
</script>
</html>